<!--配送商端--退货管理--质检退货订单-->
<template>
  <div class="quality-return-distributor">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        class="tabs-part"
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <search-form
          label-width="140px"
          :data="indexSearchData"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :show-collapse='true'
          :compact-data='searchCompactData'
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="tableLoading"
        height="200"
        :data="tableData"
        :columns="columns">
        <template
          slot-scope="scope"
          slot="default-typeReturn"
        >
          {{ typeReturn[scope.row.typeReturn] }}
        </template>
        <template
          slot-scope="scope"
          slot="default-orderStatus"
        >
          {{ status[scope.row.orderStatus] }}
        </template>
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="{ row }">
          <el-button
            size="small"
            @click.stop="handleJumpToDetail(row.orderId)"
            type="text text-primary">详情</el-button>
          <el-button
            size="small"
            @click.stop="handleReceive(row.orderId)"
            v-if="row.orderStatus==1"
            type="text text-primary">去收货</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        align='right'
        style="margin-top: 10px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page.curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="page.size"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
  </div>
</template>
<script>
import { checkReturnDeliveryAll } from '@const/beforeSettleApi'
import tabs from '@components/tabs/index.vue'
import { hasIn } from 'lodash'
import ElEditable from '@components/el-editable'
import paginationMixin from '@mixins/paginationMixin'
import { indexSearchData, indexTableColumns as columns, indexTabsArr } from './const'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
export default {
  mixins: [ paginationMixin ],
  components: { ElEditable, SearchForm, tabs },
  data () {
    return {
      submitLoading: false,
      tabIndex: 0,
      // 搜索标题字段
      indexSearchData,
      searchCompactData: indexSearchData.slice(0, 2),
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      tableData: [],
      // 列表表头
      columns,
      // tab字段
      indexTabsArr,
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      page: {
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0
      },
      typeReturn: {
        1: '批发退货',
        2: '质检退货'
      },
      status: {
        1: '待收货',
        2: '已完成'
      }
    }
  },
  mounted () {
    this.getItems()
  },
  methods: {
    // 获取列表
    getItems (data) {
      this.submitLoading = true
      this.$axios({
        method: 'post',
        url: checkReturnDeliveryAll,
        data: {
          orderStatus: this.tabIndex, // 订单状态
          pageSize: this.page.pageSize,
          page: this.page.curPage,
          deliveryProductName: data ? data.deliveryProductName : '', // 配送商名称
          provinceProductCodeReturn: data ? data.provinceProductCodeReturn : '', // 平台退货订单编号
          hospitalRetreatIdReturn: data ? data.hospitalRetreatIdReturn : '', // 医院退货订单编号
          provinceProductCode: data ? data.provinceProductCode : '', // 平台订单编号
          typeReturn: data ? data.typeReturn : '', // 退货类型
          startDate: data ? data.startDate : '', // 开始时间
          endDate: data ? data.endDate : ''// 结束时间
        }
      }).then(res => {
        console.log(res, 'res')
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        console.log(result, 'result')
        this.tableData = result.content
        this.page.total = result.totalElements
      }).finally(() => {
        this.submitLoading = false
      })
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.tabIndex = index
      this.curPage = 1
      // 获取列表
      this.getItems()
    },
    // 跳转详情
    handleJumpToDetail (orderId) {
      this.$router.push({
        path: '/distributorSide/returnOrderManage/qualityReturn/detail',
        query: { orderId }
      })
    },
    // 跳转去收货
    handleReceive (orderId) {
      this.$router.push({
        path: '/distributorSide/returnOrderManage/qualityReturn/take',
        query: { orderId }
      })
    },
    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.getItems(condition)
    },
    // 搜索功能-点击重置
    resetForm (condition) {
      this.curPage = 1
      this.searchData = condition
    },

    // 页码更改
    sizeChange (size) {
      this.page.pageSize = size
      this.getItems()
    },

    // 切换不一样的页面,重置一切数据
    pageChange (curPage) {
      this.page.curPage = curPage
      this.getItems()
    }

  }
}
</script>
<style lang="less">
.quality-return-distributor {
  .template-box {
    height: 100%;
    overflow: auto;

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
